<template>
  <div class="cpf-root">
    <left-drawer :mapView="mapView" @rowClick="leftDrawerRowClick" class="left-drawer"></left-drawer>
    <right-drawer v-if="listBaseId!=null" :base-id="listBaseId" class="right-drawer"></right-drawer>

    <el-collapse-transition>
      <bottom-card :mapView="mapView" @rowClick="bottomCardRowClick" :base-id="listBaseId" v-if="listCardVisible"
                   @closeSelfAction="()=>{listCardVisible = false}"
                   class="bottom-card"></bottom-card>
    </el-collapse-transition>
    <lark-map @loaded="mapLoaded" style="position: absolute" ref="cpf-map" :map-config="bufferMapConfig"></lark-map>

    <div style="display: none">
      <simple-popup ref="simple-popup"></simple-popup>
    </div>

  </div>
</template>

<script>
  import { reactive, toRefs, onMounted, ref, computed, nextTick } from '@vue/composition-api'
  import { Message, MessageBox } from 'element-ui'
  import store from '@/store'
  import router from '@/router'
  import mapConfig from '../../../../datas/cpfMapConfig.json'
  import {} from 'lark-map'
  import leftDrawer from './leftDrawer'
  import rightDrawer from './rightDrawer'
  import bottomCard from './bottomCard'
  import {
    getGraphicList,
    addGraphicLayer,
    getGraphic,
    getMapViewState,
    setMapViewState,
    getGraphicByGeometry,
    queryGraphicByAttribute,
    queryResultsByUrls,
    highlightByGeometryList,
    getGeometryListByQueryResult,
    getTabsDataByQueryResult,
    getOnlyResByQueryResult,
    removeHighlight,
    queryByGeometry,
    openPopup
  } from 'lark-map'
  import simple from '@/components/ServiceComponents/mapPopup/simple'

  export default {
    name: 'cpf',
    props: {},
    components: {
      leftDrawer,
      bottomCard,
      rightDrawer,
      simplePopup: simple
    },
    setup(props, content) {
      let { history: { current: { query: { baseId: listBaseId = null } } } } = router
      let {} = props

      const data = reactive({
        listCardVisible: false,
        bufferMapConfig: mapConfig,
        mapView: null,
        listBaseId
      })
      if (data.listBaseId != null) {
        data.listCardVisible = true
      }

      const mapLoaded = ({ mapView, mapType }) => {
        data.mapView = mapView
        mapView.on('click', async event => {
          console.log('event', event)

          // let res = await queryByGeometry({
          //   view: mapView,
          //   geometry: queryGeometry,
          //   idList: ['SeedFarmService'],
          //   returnFieldName: [{ parentId: 'SeedFarmService', value: false }],
          //   returnGeometry: [{ parentId: 'SeedFarmService', value: true }],
          //   layerOption: [{ parentId: 'SeedFarmService', value: 'visible' }],
          //   tolerance: [{ parentId: 'SeedFarmService', value: 0 }],
          //   subLayerIds: [{ parentId: 'SeedFarmService  ', value: [0,1,2] }]
          // })

          // let requestParams = {
          //   view: props.mapView,
          //   idList: ['SeedFarmService'],
          //   outFields: [{ parentId: 'SeedFarmService', value: ['*'] }],
          //   where: [{ parentId: 'SeedFarmService', value: `1=1 and id = '${row.id}'` }],
          //   returnGeometry: [{ parentId: 'SeedFarmService', value: true }],
          //   subLayerIds: [{ parentId: 'SeedFarmService', value: [2] }]
          // }
          //
          // let res = await queryResultsByUrls(requestParams)
          // let geometryList = getGeometryListByQueryResult({ res, merge: true })
          // if (!geometryList?.length) {
          //   Message.warning('没有查询结果')
          //   removeHighlight(props.mapView)
          //   return
          // }
          // highlightByGeometryList({ view: props.mapView, geometryList: geometryList, zoom: true })
          // console.log(content.refs['simple-popup'])
          // openPopup({ view: mapView, location: event.mapPoint, popupContent: content.refs['simple-popup'].$el, zoom: true })

        })
      }

      const leftDrawerRowClick = (row) => {
        data.listCardVisible = true
        data.listBaseId = row.id
      }

      const bottomCardRowClick = row => {
        console.log(row)
      }

      onMounted(() => {

      })

      return { ...toRefs(data), mapLoaded, leftDrawerRowClick, bottomCardRowClick }
    }
  }
</script>

<style scoped lang="scss">
  $full: 100%;
  .cpf-root {
    width: 100%;
    height: 100%;
    position: relative;

    .bottom-card, .right-drawer, .left-drawer, {
      z-index: 10;
      position: absolute;

    }

    .bottom-card {
      bottom: 0;
      left: 12%;
    }


    .right-drawer {
      top: 5%;
      right: 0;
    }

    .left-drawer {
      left: 0;
      top: 5%

    }
  }
</style>
